<template>
    <div class="container">
        <div class="head">
            <span>{{ t('yl.seriesDetail') }}</span>
            <a-button type="primary" size="small" v-show="hasDict" @click="handleNew"
                >{{ t('yl.new') }}
                <template #icon>
                    <PlusOutlined />
                </template>
            </a-button>
        </div>
        <div class="body">
            <a-table
                :columns="columns"
                :data-source="dataSource"
                row-key="id"
                :loading="loading"
                :scroll="{ y: 500 }"
                class="dict-data__table-table"
            >
                <template v-for="item in columns" :key="item.dataIndex" v-slot:[item.slotName]>
                    <span>{{ t(`yl.${item.slotName}`) }}</span>
                </template>

                <template #customAction="{ record }">
                    <a-button
                        class="action-btn action-btn__edit"
                        @click.stop="handleEditDict(record)"
                        type="primary"
                        size="small"
                    >
                        <template #icon>
                            <EditOutlined />
                        </template>
                    </a-button>
                    <a-popconfirm placement="topRight" @confirm.stop="handleDelete(record.id)">
                        <template #title>
                            <p>{{ t('yl.deleteConfirmtext') }}</p>
                        </template>
                        <a-button class="action-btn action-btn__delete" type="danger" size="small">
                            <template #icon>
                                <Delete />
                            </template>
                        </a-button>
                    </a-popconfirm>
                </template>
            </a-table>
        </div>
        <yl-dict-detail-model
            :visible="visible"
            :loading="loading"
            :title="title"
            :detail="selectedRow"
            @cancle="handleCancle"
            @submit="handleSubmit"
        ></yl-dict-detail-model>
    </div>
</template>

<script lang="ts">
import { computed, defineComponent, reactive, toRefs, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { PlusOutlined } from '@ant-design/icons-vue';

import { addType, editType, getTypes, deleteTypes } from '@/api/warehouse';

import columns from './detailColumns';
import ylDictDetailModel from './dictDetailModel.vue';
import { message } from 'ant-design-vue';

export default defineComponent({
    name: 'detailTable',
    props: {
        loading: {
            type: Boolean,
            default: () => false,
        },
        checkedDict: {
            type: Object,
            default: () => {
                return {};
            },
        },
    },
    components: {
        PlusOutlined,
        ylDictDetailModel,
    },
    setup(props) {
        const { t } = useI18n();

        const state = reactive({
            dataSource: [] as NormalObj[],
            visible: false,
            loading: false,
            selectedRow: {},
            title: t('yl.addSeriesItem'),
        });

        watch(
            () => props.checkedDict,
            (newValue) => {
                getTypesList();
            }
        );
        // 是否选中字典
        const hasDict = computed(() => (props.checkedDict.id ? true : false));
        // 新增系列属性
        const handleNew = () => {
            state.title = t('yl.addSeriesItem');
            state.selectedRow = {};
            state.visible = true;
        };

        // 编辑属性
        const handleEditDict = (record: NormalObj) => {
            state.selectedRow = record;
            state.title = t('yl.editSeriesItem');
            state.visible = true;
        };

        // 删除属性
        const handleDelete = (id: number) => {
            deleteTypes([id]).then(() => {
                message.success(t('yl.deleteSuccess'));
                getTypesList();
            });
        };

        // 取消新增、编辑系列属性
        const handleCancle = () => {
            state.visible = false;
            state.selectedRow = {
                typeName: '',
                id: '',
                type: 1,
                pCode: props.checkedDict.typeCode,
            };
        };

        // 获取类型下系列列表
        const getTypesList = async () => {
            console.log(props.checkedDict);
            const params = {
                page: 0,
                type: 1,
                pCode: props.checkedDict.typeCode,
            };
            const response = await getTypes(params);
            state.dataSource = response.content;
        };

        // 确定新增、编辑系列属性
        const handleSubmit = (item: NormalObj) => {
            state.loading = true;
            const msg = item.id ? t('yl.editSuccess') : t('yl.addSuccess');
            const params = {
                ...item,
                pCode: props.checkedDict.typeCode,
            };
            const realRequest = item.id ? editType(params) : addType(params);
            return realRequest
                .then(() => {
                    state.loading = false;
                    message.success(msg);
                    state.visible = false;
                    const timer = setTimeout(() => {
                        getTypesList();
                        state.selectedRow = {
                            typeName: '',
                            id: '',
                            type: 1,
                            pCode: props.checkedDict.typeCode,
                        };
                        clearTimeout(timer);
                    }, 100);
                })
                .catch(() => {
                    state.loading = false;
                });
        };

        return {
            t,
            handleNew,
            columns,
            ...toRefs(state),
            handleEditDict,
            handleDelete,
            hasDict,
            handleCancle,
            handleSubmit,
        };
    },
});
</script>

<style lang="scss" scoped>
.container {
    padding: $width10;
    @include border;
    box-shadow: $boxShadow;
    .head {
        @include alignCenter;
        justify-content: space-between;
        padding: $width10 $width0 $width10 $width16;
    }
    .body {
        position: relative;
        .action-btn + .action-btn {
            margin-left: $width8;
        }
    }
}
</style>
